<template>
  <div class="container">
    <div class="main">
      <div class="main_content">
        <div class="main_header">
          <a-input
            placeholder="搜索学生信息"
            style="width: 160px; height: 36px"
            v-model="searchDetail"
          />
          <a-button
            type="primary"
            style="margin-left: 10px; width: 70px; height: 36px"
            @click="toSearch"
          >
            查询
          </a-button>
          <a-button
            type="danger"
            style="margin-left: 10px; width: 90px; height: 36px"
            @click="toAddClass"
          >
            批量添加
          </a-button>
        </div>
        <div class="main_table">
          <a-spin
            size="large"
            v-show="loadingVisible"
            style="loading_icon"
            tip="正在加载中"
          ></a-spin>
          <!-- data-source 数据源,column 列名  row-selection列表项是否可选择	-->
          <!-- rowSelection 是计算属性进行加工处理 -->
          <a-table
            rowKey="id"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :columns="columns"
            :data-source="data"
            :pagination="pagination"
            @change="handleTableChange"
          >
            <img
              style="width: 50px; height: 50px; border-radius: 50%"
              slot="pic"
              slot-scope="text"
              :src="text"
            />
            <!-- 作用域插槽 text 本身是每一 列的所有属性 但是 column的配置是 dataIndex 是avaurl 所以text 就变成了每一类的avarurl -->
          </a-table>
          <a-button type="primary" @click="finishAdd" style="margin-left: 10px">
            <!-- 当前时间 大于开始时间 查看  允许在开始前 修改 -->
            添加学生
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedRowKeys: [], // Check here to configure the default column
      loadingVisible: true,
      //删除中多选中的id列表
      idList: [],
      // 搜索框内容
      searchDetail: "",
      // 静态模态的出现
      addOrUpdateVisible: false,
      // 列名
      columns: [
        // title:列名; dataIndex: 对应数据源中的键值(kay)
        {
          dataIndex: "avatarUrl",
          fixed: "left",
          key: "pic",
          scopedSlots: { customRender: "pic" },
        },
        {
          title: "学号",
          dataIndex: "number",
        },
        {
          title: "电话",
          dataIndex: "phone",
        },
        {
          title: "学生信息",
          dataIndex: "name",
        },
        {
          title: "班级类名",
          dataIndex: "className",
        },
        {
          title: "系部名称",
          dataIndex: "deptName",
        },
        {
          title: "学校名称",
          dataIndex: "schoolName",
        },
        {
          title: "积分数",
          dataIndex: "totalScore",
          sorter: (a, b) => a.totalScore - b.totalScore,
        },
      ],
      // 数据源
      data: [
        //  键值key 对应列名, key为Vue 需要key 可以忽略
      ],
      pagination: {
        defaultPageSize: 5,
        position: "bottom",
        pageSize: 10,
        pageSizeOptions: ["10", "15", "20", "25"],
        current: 1,
        total: 0,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
      },
      //   表头的配置条件
      sortedInfo: null,
    };
  },
  created() {
    this.searchRole();
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed:123 ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      let ids = [];
      selectedRowKeys.forEach((item) => {
        ids.push(item);
      });
      this.idList = ids;
    },
    async toAddClass() {
      let record = this.$route.params.record;
      this.$router.push({
        name: "activeAssignClass",
        params: {
          record,
          studentIds: this.selectedRowKeys,
        },
      });
    },
    async finishAdd() {
      console.log("selectedRowKeys", this.selectedRowKeys);
      console.log("rrr", this.$route.params.record.id);
      const { data: res } = await this.$http.post("/admin/activity/students", {
        activityId: this.$route.params.record.id,
        studentIds: this.selectedRowKeys,
      });
      if (res.code == 200) {
        this.common.notify("success", "添加成功");
        this.$router.push({
          name: "active",
        });
      }
    },
    // 查询用户
    async toSearch() {
      if (this.searchDetail == "") {
        this.getRoleMessage();
      } else {
        const { data: res } = await this.$http.get(
          `/admin/teacher/students?name=${this.searchDetail}`
        );
        this.data = res.data.records;
      }
    },

    // 分页点击切换
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      let that = this;
      that.sortedInfo = sorter;
      const pager = { ...that.pagination };
      pager.current = pagination.current;
      that.pagination = pager;
      this.searchRole();
    },

    // 分页查询
    async getRoleMessage(val) {
      this.searchRole();
    },
    // 分页查询显示
    async searchRole() {
      //  `/admin/question/categories?page=${this.pagination.current}&size=${this.pagination.pageSize}`
      const { data: res } = await this.$http.get(
        `/admin/teacher/students?page=${this.pagination.current}&size=${this.pagination.pageSize}`
      );
      //   必须要是 数字型的
      this.loadingVisible = false;
      this.pagination.total = Number(res.data.total);
      const { data: res2 } = await this.$http.get(
        `/admin/activity/users/${this.$route.params.record.id}`
      );
      console.log("daat,", res2.data);
      console.log("target", res.data.records);
      let needFocusStudentIdList = res2.data;
      let allStudentData = res.data.records;
      allStudentData.forEach((item) => {
        item.focus = false;
      });
      needFocusStudentIdList.forEach((key) => {
        allStudentData.forEach((item) => {
          if (item.id == key) {
            item.focus = true;
            this.selectedRowKeys.push(item.id);
          }
        });
      });
      this.data = res.data.records;
    },
  },
  computed: {},
};
</script>
<style  lang='less' scoped>
.container {
  box-sizing: border-box;
  display: flex;
  background-color: #eef1f2;
  // overflow: scroll;
  padding: 35px 75px;

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    // overflow: scroll;
    background-color: #eef1f2;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .main_content {
      padding: 20px;
      padding-top: 20px;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 10px;
      .main_header {
        display: flex;
        margin-bottom: 25px;
        .main_table {
          margin-top: 50px;
        }
      }
    }
  }
}
/deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  text-align: center;
}
/deep/ .ant-table-tbody > tr > td {
  text-align: center !important;
}
.disableColor {
  color: #eee;
}

/deep/ .ant-spin-spinning {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 55%;
}
</style>